<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>实时交易数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>

    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

    <script src="../js/realtime.js"></script>

    <style>
        .layui-card {
            padding: 15px;
        }

        .font20 {
            font-size: 20px;
        }

        .font12 {
            font-size: 12px;
        }

        .title2 {
            border-left: 3px solid #00c250;
            margin-top: 20px;
            height: 14px;
            line-height: 14px;
            padding-left: 10px;
        }

        .selected {
            color: #ffffff;
            background: #009b40;
        }


        .cont {
            display: flex;
            border: 1px solid #e7eaf0;
            margin-top: 20px;
            justify-content: space-around;
            align-items: center;
        }

        .cont>div {
            width: 33%;
            text-align: center;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            cursor: pointer;
        }

        .cont img {
            height: 15px;
        }
    </style>
</head>


<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="title font20">实时交易数据</div>
            <div class="title2 font12">累计数据和趋势</div>
            <div style="margin:0 100px;">
                <div class="cont" id="cont">
                    <div class="selected" data-index="0">
                        <div class="font12">近24小时销售金额(元)</div>
                        <div class="font20" id="div0"></div>
                        <div class="font12">对比上24小时<img class="arrImg" id="img0" src="../image/up.png" /><span
                                id="label0"></span></div>
                    </div>
                    <div style="border-left: 1px solid #e7eaf0;" data-index="1">
                        <div class="font12">近24小时销售笔数(笔)</div>
                        <div class="font20" id="div1"></div>
                        <div class="font12">对比上24小时<img class="arrImg" id="img1" src="../image/up.png" /><span
                                id="label1"></span></div>
                    </div>
                    <div style="border-left: 1px solid #e7eaf0;" data-index="2">
                        <div class="font12">近24小时人均金额(元)</div>
                        <div class="font20" id="div2"></div>
                        <div class="font12">对比上24小时<img class="arrImg" id="img2" src="../image/down.png" /><span
                                id="label2"></span></div>
                    </div>
                </div>
                <div id="chart1" style="height: 300px;width: 100%;">

                </div>

            </div>
            <div class="title2 font12">详细数据<div style="float: right;margin-right: 50px;">
                    下载交易数据<span id="toexcel" style="cursor: pointer;color: #4466AD;margin-left: 10px;">Excel导出</span>
                </div>
            </div>
            <div class="layui-card-body" style="margin-top: 20px;">
                <table id="datatable" lay-filter="datatable"></table>
            </div>
            <div class="font12" id="biaozhu"></div>
        </div>
</body>

<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon  layui-icon-align-center"></i>查看详情</a>
</script>

</html>